<template>
  <div
    id="graduation_leave"
    class="dialog animated"
    :class="open? 'fadeIn':'fadeOut'"
    v-show="show"
    :style="{ visibility: visible ? 'visible' : 'hidden' }"
  >
    <div class="panel animated" :class="open? 'zoomIn':''">
      <graduationLeaveSelect
        v-show="step==1"
        ref="graduationLeaveSelect"
        @cancel="cancel"
        @nextStep="showLeaveConfirm"
      ></graduationLeaveSelect>
      <graduationLeaveConfirm
        v-show="step==2"
        ref="graduationLeaveConfirm"
        @cancel="cancel"
        @previousStep="showLeaveSelect"
      ></graduationLeaveConfirm>
    </div>
  </div>
</template>

<script>
import graduationLeaveSelect from "./graduation_leave_select"; //毕业选择学员页面
import graduationLeaveConfirm from "./graduation_leave_confirm"; //毕业确认页面

var vm;
export default {
  components: {
    graduationLeaveSelect,
    graduationLeaveConfirm,
  },
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      step: 1,
      infoData: null
    };
  },
  methods: {
    init: function(infoData) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.step = 1;
      vm.infoData = infoData;
      vm.$refs.graduationLeaveSelect.init(infoData);
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.step = 0;
      }, 11);
    },
    /**显示毕业选择学员 */
    showLeaveSelect() {
      vm.step = 1;
      vm.$refs.graduationLeaveSelect.init(vm.infoData);
    },
    /**显示毕业确认页 */
    showLeaveConfirm() {
      vm.step = 2;
      vm.$refs.graduationLeaveConfirm.init(vm.infoData);
    },
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
#graduation_leave {
  .el-input__inner {
    border-radius: 0.1rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  margin-top: 0.6rem;
  /*width: 12.44rem;*/
}
</style>